<template>
  <div class="dashboard-container">
    <div class="topTit">
      <el-date-picker
        v-model="value"
        @change="setDate"
        size="mini"
        type="daterange"
        range-separator="至"
        :picker-options="pickerOptions"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <div class="outData" @click="outData">导出原始数据</div>
    </div>
    <div class="setContent">
      <div class="cont">
        <el-table :data="tableData" stripe>
          <el-table-column
            label="姓名"
            prop="name"
            width="90"
            fixed
            align="center"
          >
            <template scope="scope">
              <span style="color: #3345ff">{{
                scope.row.name || scope.row.username
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="workNumber"
            label="工号"
            width="120"
            fixed
            align="center"
          />
          <el-table-column
            prop="departmentName"
            label="部门"
            width="120"
            show-overflow-tooltip
            fixed
            align="center"
          />
          <el-table-column
            prop="post"
            label="职位"
            width="120"
            show-overflow-tooltip
            fixed
          />
          <div v-if="total > 0">
            <el-table-column
              v-for="(item, index) in tableData[0].attendsList"
              :key="index"
              :label="item.attendDate"
              align="center"
              min-width="95"
              flxed
            >
              <template scope="scope">
                <span
                  style="cursor: pointer; color: #3345ff"
                  v-show="item.attendStatus != '缺卡'"
                  @click="showInfo(scope.row, scope.row.attendsList[index])"
                  >{{ scope.row.attendsList[index].attendStatus }}</span
                >
                <span
                  style="cursor: pointer"
                  v-show="item.attendStatus == '缺卡'"
                  >{{ scope.row.attendsList[index].attendStatus }}</span
                >
              </template>
            </el-table-column>
          </div>
        </el-table>
        <div class="pageList">
          <el-pagination
            v-if="total > params.pageSize"
            layout="prev, pager, next"
            @current-change="handlePageChange"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      center
      width="30%"
      style="border-radius: 10px"
      :before-close="handleClose"
    >
      <div class="userInfo">
        <div class="header">
          <div class="headIcon" v-if="userInfo.icon">
            <img :src="userInfo.icon" alt="" width="30" />
          </div>
          <div class="headNoIcon" v-if="!userInfo.icon">
            {{ userInfo.userName ? userInfo.userName.substring(0, 1) : "无" }}
          </div>
          <div>
            <div>{{ userInfo.userName }}</div>
            <div>
              {{ userInfo.attendGroup ? userInfo.attendGroup.name : "-" }}
              考勤时间:
              {{
                userInfo.attendGroup ? userInfo.attendGroup.startWorkTime : "-"
              }}
              -
              {{
                userInfo.attendGroup ? userInfo.attendGroup.offWorkTime : "-"
              }}
            </div>
          </div>
        </div>
        <div class="content">
          <div>
            <span>打卡时间：</span>
            {{
              userInfo.attendStartWork
                ? userInfo.attendStartWork.punchTime
                : "缺卡"
            }}
            /
            {{
              userInfo.attendOffWork ? userInfo.attendOffWork.punchTime : "缺卡"
            }}
          </div>
          <div>
            <span>打卡状态：</span> {{ userInfo.attendStatus || "缺卡" }}
          </div>
          <div><span>打卡地址：</span> {{ userInfo.address || "未知" }}</div>
          <div>
            <span>打卡备注：</span> {{ userInfo.description || "暂无备注" }}
          </div>
          <div>
            <span>打卡图片：</span>
            <span class="headIcon" v-if="userInfo.picture"
              ><img :src="userInfo.picture" alt="" width="30"
            /></span>
            <span class="headNoIcon" v-if="!userInfo.picture">暂无</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import moment from "moment";

export default {
  name: "Dashboard",
  filters: {
    dateFormat(val) {
      return val;
    },
  },
  data() {
    return {
      value: "",
      title: "",
      total: 0,
      dialogVisible: false,
      userInfo: {},
      params: {
        startTime: "",
        endTime: "",
        page: 1,
        pageSize: 10,
      },
      loading: true,
      tableData: [{}],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
    };
  },
  created() {
    const now = new Date();
    const stTime =this.getDateNow(true);
    const endTime =this.getDateNow();
    this.setValue([stTime, endTime]);
    this.getAttendanceList();
    console.log(this.getDateNow());
  },
  methods: {
    getDateNow(pre) {
      var  date =  new  Date();
      var  seperator1 =  "-" ;
      var  year = date.getFullYear();
      var  month;
      if(pre){
        month = date.getMonth() + 1 - 1;
      }else{
        month = date.getMonth() + 1;
      }
      var  strDate = date.getDate();
      if  (month >= 1 && month <= 9) {
        month =  "0"  + month;
      }
      if  (strDate >= 0 && strDate <= 9) {
        strDate =  "0"  + strDate;
      }
      var  currentdate = year + seperator1 + month + seperator1 + strDate;
      return  currentdate;
    },
    getAttendanceList() {
      this.$store
        .dispatch("attendance/attendanceList", this.params)
        .then((res) => {
          this.total = res.total;
          this.tableData = res.rows;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 导出数据
    outData() {
      const startTime = moment(this.value[0], "YYYY-MM-DD HH:mm:ss").format(
        "YYYY-MM-DD"
      );
      const endTime = moment(this.value[1], "YYYY-MM-DD HH:mm:ss").format(
        "YYYY-MM-DD"
      );
      this.$store
        .dispatch("attendance/signExoprtAct", {
          startTime,
          endTime,
        })
        .then((res) => {
          console.log(res);

          if (res) {
            const content = res;
            const blob = new Blob([content]);
            const fileName = `${startTime}-${endTime}考勤.xlsx`;
            // 非IE下载
            const elink = document.createElement("a");
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
            // const url = res.data;
            // let a = document.createElement("a");
            // a.href = url;
            // a.click();
          } else {
            this.$message.error("出错了！" + res.message);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    setDate(value) {
      this.params.startTime = moment(value[0], "YYYY-MM-DD HH:mm:ss").format(
        "YYYY-MM-DD"
      );
      this.params.endTime = moment(value[1], "YYYY-MM-DD HH:mm:ss").format(
        "YYYY-MM-DD"
      );
      this.getAttendanceList(value[0], value[1]);
    },
    setValue(value) {
      let date = [value[0], value[1]];
      this.params.startTime = value[0];
      this.params.endTime = value[1];
      this.value = date;
    },
    showInfo(row, attend) {
      const data = row;
      this.title = moment(attend.attendDate, "YYYY-MM-DD").format(
        "YYYY年MM月DD日"
      );
      console.log(333, data, attend);
      this.$store
        .dispatch("attendance/attendanceDetails", {
          userId: row.userId,
          attendDate: moment(attend.attendDate, "YYYY-MM-DD").format(
            "YYYY-MM-DD"
          ),
        })
        .then((res) => {
          console.log(res);
          this.userInfo = res;
          this.dialogVisible = true;
        });
    },
    handleClose(done) {
      done();
    },
    handlePageChange(val) {
      this.params.page = val;
      this.getAttendanceList();
    },
    formatDate(val) {
      return moment(new Date(Number(val))).format("HH:mm:ss");
    },
  },
};
</script>

<style lang="scss">
.setContent {
  .cont {
    .el-table thead th,
    .el-table thead tr {
      background: #edeffd;
    }
  }

  .pageList {
    text-align: right;
    padding: 10px 0;

    .el-pager li {
      margin: 0 5px;
      min-width: 28px;
      width: 28px;
    }

    .active {
      background: #3345ff;
      border-radius: 100%;
      color: #fff;
    }
  }
}

.el-dialog__header {
  border-bottom: solid 1px #eaeaea;
}
</style>
<style lang="scss" scoped>
.dashboard {
  &-container {
    padding: 0 15px;

    .topTit {
      line-height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .outData {
        color: #3345ff;
        cursor: pointer;
        font-size: 14px;
      }
    }

    .setContent {
      background: #fff;
      min-height: 510px;

      .title {
        padding: 0 15px;
        line-height: 40px;
        background: #eceffc;
      }

      .cont {
      }
    }

    .userInfo {
      .header {
        background: rgba(40, 97, 254, 0.14);
        display: flex;
        padding: 10px 20px;
        line-height: 20px;
        border-radius: 8px;

        .headIcon {
          width: 40px;
          height: 40px;
          margin-right: 10px;

          img {
            width: 40px;
            height: 40px;
            line-height: 40px;
            border-radius: 100%;
          }
        }

        .headNoIcon {
          font-size: 20px;
          text-align: center;
          line-height: 40px;
          margin-right: 10px;
          width: 40px;
          height: 40px;
          color: #fff;
          background: #3345ff;
          border-radius: 100%;
        }
      }

      .content {
        line-height: 35px;
        margin-top: 10px;
      }
    }
  }
}
</style>
